<template>
  <div>
    <div class="upper-box">
      <div style="float: right">
        <el-input
          placeholder="请输入内容"
          v-model="search"
          clearable
          style="width: 200px !important; margin-right: 20px"></el-input>
        <el-button
          @click="searchConfirm"
          type="primary"
          style="margin-right: 10px"
          ><i class="el-icon-search"></i>搜索</el-button
        >
      </div>
      <div style="clear: both"></div>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="tableData" stripe>
        <el-table-column prop="userId" label="ID" width="50"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="identity" label="身份权限">
          <template slot-scope="scope">
            <div v-if="tableData[scope.$index].identity == 0">管理员</div>
            <div v-else>实习生</div>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="300"
          ><template slot-scope="scope">
            <el-button
              @click.native.prevent="setIdentity(scope.$index, tableData)"
              type="primary"
              size="mini"
              plain>
              权限设置
            </el-button>
            <el-button
              @click.native.prevent="setPassword(scope.$index, tableData)"
              type="success"
              size="mini"
              plain>
              密码修改
            </el-button>
            <el-button
              @click.native.prevent="setDelet(scope.$index, tableData)"
              type="danger"
              size="mini"
              plain>
              删除用户
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="权限管理"
      :visible.sync="setIdentityDialogVisible"
      width="30%"
      :before-close="setIdentityHandleClose">
      <span></span>
      <el-radio v-model="identityRadio" :label="0">管理员</el-radio>
      <el-radio v-model="identityRadio" :label="1">实习生</el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setIdentityHandleClose">取 消</el-button>
        <el-button type="primary" @click="setIdentityHandleConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="密码管理"
      :visible.sync="setPasswordDialogVisible"
      width="30%"
      :before-close="setPasswordHandleClose">
      <el-input v-model="password" placeholder="请输入新的密码"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setPasswordHandleClose">取 消</el-button>
        <el-button type="primary" @click="setPasswordHandleConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllUsers,
  searchUsers,
  uploadRole,
  uploadPwd,
  userDelete,
} from '../../api/index'
export default {
  name: 'user',
  data() {
    return {
      search: '',
      tableData: [],
      setIdentityDialogVisible: false,
      setPasswordDialogVisible: false,
      identityRadio: '1',
      dialogUser: '',
      password: '',
      dataUserId: '',
      email: '',
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      getAllUsers().then((res) => {
        this.tableData = res.data.data
      })
    },
    searchConfirm() {
      let data = {}
      data.username = this.search
      console.log({ data })
      searchUsers(data).then((res) => {
        console.log('search', res)
        if (res.data.code == 200) {
          this.tableData = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    setIdentity(index, tableData) {
      console.log(index, tableData)
      this.identityRadio = this.tableData[index].identity
      console.log(this.identityRadio)
      this.dialogUser = this.tableData[index].username
      this.setIdentityDialogVisible = true
      this.dataUserId = this.tableData[index].userId
    },
    setIdentityHandleClose() {
      this.setIdentityDialogVisible = false
    },
    setIdentityHandleConfirm() {
      if (this.dataUserId == sessionStorage.getItem('admin')) {
        this.$message.error('管理员不能修改自己权限')
      } else {
        let data = {}
        data.role = this.identityRadio
        data.userId = this.dataUserId
        uploadRole(data).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.data)
            this.getUser()
          }
        })
      }
      this.setIdentityDialogVisible = false
    },
    setPasswordHandleClose() {
      this.setPasswordDialogVisible = false
      this.password = ''
    },
    setPasswordHandleConfirm() {
      let data = {}
      if (this.password.length < 5 || this.password.data > 20) {
        this.$message.error('密码长度应该在5-20之间')
      } else {
        data.email = this.email
        data.password = this.password
        console.log('pwddata', data)
        uploadPwd(data).then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            this.setPasswordDialogVisible = false
            this.password = ''
            this.$message.success('修改成功')
          }
        })
      }
    },
    setPassword(index, tableData) {
      this.dialogUser = this.tableData[index].username
      this.email = this.tableData[index].email
      this.setPasswordDialogVisible = true
    },
    setDelet(index, tableData) {
      let data = {}
      data.userId = this.tableData[index].userId
      userDelete(data)
        .then((res) => {
          console.log('userdelete', res)
          if (res.data.code == 200) {
            this.$message.success('删除成功')
            this.getUser()
          } else {
            this.$message.error('res.data.message')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>
<style scoped>
.bg {
  color: red;
  padding-top: 20px;
}
</style>
